<template>
  <div class="app-container">
    <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="66px">
      <div style="margin-bottom: 20px">
        <el-button type="success" @click="importRecruit">导入</el-button>
        <el-button type="primary" @click="download">模板下载</el-button>
        <el-button type="warning" @click="showUpload">上传简历</el-button>
      </div>

      <el-dialog
           :close-on-click-modal="false"
           :visible.sync="dialogVisible"
           :title="dialogTitle"
           :before-close="handleClose"
           style="text-align: center"
           width="650px">
        <el-upload
          class="upload-demo"
          :on-success="handlerSuccess"
          :on-error="handlerError"
          :headers="headers"
          name="file"
          drag
          action="/api/recruit/import">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传excel文件</div>
        </el-upload>
      </el-dialog>

      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="dialogResumeVisible"
        title="简历上传"
        :before-close="handleClose"
        style="text-align: center"
        width="650px">
        <el-upload
          class="upload-demo"
          :on-success="handlerSuccess"
          :on-error="handlerError"
          :headers="headers"
          name="file"
          drag
          action="/api/recruit/upload">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-dialog>

      <el-row>
        <el-col :span="6">
          <el-form-item label="招聘人" label-width="80px" required prop="name">
            <el-input v-model="form.name" @keydown.native="keydown($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--        性别-->
          <el-form-item label="性别" label-width="80px" clearable required prop="sex">
            <el-select v-model="form.sex" clearable size="small" placeholder="性别" class="filter-item"
                       style="width:92%">
              <el-option v-for="item in sex" :key="item.key" :label="item.display_name" :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--        优先级-->
          <el-form-item label="优先级" label-width="80px" clearable required prop="priority">
            <el-select v-model="form.priority" clearable size="small" placeholder="优先级" class="filter-item"
                       style="width:92%">
              <el-option v-for="item in priority" :key="item.key" :label="item.display_name" :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--        渠道-->
          <el-form-item label="渠道" label-width="80px" clearable required prop="channelId">
            <el-select
              v-model="form.channelId"
              placeholder="请选择"
              @change="changeChannel"
              style="width:92%">
              <el-option
                v-for="item in channels"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <!--        来源-->
          <el-form-item style="margin-bottom: 0;"  label-width="80px" clearable required label="来源" prop="sourceId">
            <el-select
              v-model="form.sourceId"
              placeholder="请选择"
              style="width:92%">
              <el-option
                v-for="item in sources"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--        产品-->
          <el-form-item style="margin-bottom: 0;" label-width="80px" clearable label="产品线" required prop="productId">
            <el-select
              v-model="form.productId"
              placeholder="请选择"
              style="width:92%">
              <el-option
                v-for="item in products"
                :key="item.product"
                :label="item.product"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--        手机号码-->
          <el-form-item label="手机号码" required label-width="80px" prop="phone">
            <el-input v-model="form.phone" @keydown.native="keydown($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!-- 选择公司-->
          <el-form-item style="margin-bottom: 0;" label-width="80px" clearable required label="公司" prop="companyId">
            <el-select
              v-model="form.companyId"
              placeholder="请选择"
              style="width:92%">
              <el-option
                v-for="item in companys"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <!--        学历-->
          <el-form-item label="学历" label-width="80px" required prop="degree">
            <el-select v-model="form.degree" clearable size="small" placeholder="学历" class="filter-item"
                       style="width:92%">
              <el-option v-for="item in degree" :key="item.key" :label="item.display_name" :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--        年龄-->
          <el-form-item label="年龄" label-width="80px" prop="age">
            <el-input v-model="form.age" @keydown.native="keydown($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--        专业-->
          <el-form-item label="专业" label-width="80px" prop="major">
            <el-input v-model="form.major" @keydown.native="keydown($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--        身份证号-->
          <el-form-item label="身份证号" label-width="80px" prop="card">
            <el-input v-model="form.card" @keydown.native="keydown($event)"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <!--        微信-->
          <el-form-item label="微信" label-width="80px" prop="weixin">
            <el-input v-model="form.weixin" @keydown.native="keydown($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--        QQ-->
          <el-form-item label="QQ" label-width="80px" prop="qq">
            <el-input v-model="form.qq" @keydown.native="keydown($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--        邮箱-->
          <el-form-item label="邮箱" label-width="80px" prop="email">
            <el-input v-model="form.email" @keydown.native="keydown($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--        岗位-->
          <el-form-item label="岗位" label-width="80px" prop="jobs">
            <el-input v-model="form.jobs" @keydown.native="keydown($event)"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <!--        毕业学校-->
          <el-form-item label="毕业学校" label-width="80px" prop="school">
            <el-input v-model="form.school" @keydown.native="keydown($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--        详细地址-->
          <el-form-item label="详细地址" label-width="80px" prop="address">
            <el-input v-model="form.address" @keydown.native="keydown($event)"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="备注" label-width="80px" prop="note">
            <el-input v-model="form.note" @keydown.native="keydown($event)"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="warning" @click="cancel">重置</el-button>
      <el-button type="primary" @click="addRecruit">添加</el-button>
    </div>
  </div>
</template>

<script>
import crudProduct from '@/api/system/product'
import crudChannel from '@/api/system/channel'
import crudCompany from '@/api/system/company'
import crudRecruit from '@/api/system/recruit'
import { getToken } from '@/utils/auth'

export default {
  name: 'Recruit',
  mounted() {
    this.getAllChannel()
    this.getAllProducts()
    this.getAllCompanys()
  },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '导入招聘人数据',
      dialogResumeVisible: false,
      headers: {
        'Authorization': getToken()
      },
      form: {
        id: null, name: null,
        sex: null, priority: null, channelId: null, sourceId: null, productId: null, phone: null,
        degree: null, age: null, major: null, weixin: null, qq: null, card: null, school: null,
        jobs: null, email: null, address: null, note: null, companyId: null
      },
      channels: [], products: [], sources: [], companys: [],
      height: document.documentElement.clientHeight - 180 + 'px;',
      user_status: [
        { id: 1, label: '启用', value: 'true' },
        { id: 2, label: '禁用', value: 'false' }
      ],
      permission: {
        add: ['admin', 'user:add'],
        edit: ['admin', 'user:edit'],
        del: ['admin', 'user:del']
      },
      sex: [
        { key: 'true', display_name: '男' },
        { key: 'false', display_name: '女' }
      ],
      priority: [
        { key: 1, display_name: '低' },
        { key: 2, display_name: '中低' },
        { key: 3, display_name: '中' },
        { key: 4, display_name: '高' },
        { key: 5, display_name: '较高' }
      ],
      degree: [
        { key: 1, display_name: '小学' },
        { key: 2, display_name: '初中' },
        { key: 3, display_name: '高中' },
        { key: 4, display_name: '大专' },
        { key: 5, display_name: '本科' },
        { key: 6, display_name: '硕士' },
        { key: 7, display_name: '博士' }
      ],
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    cancel() {
      this.$refs['form'].resetFields()
      this.form = { oldPassword: '', newPassword: '', confirmPassword: '' }
    },
    download() {
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = 'http://rcisyopdp.hn-bkt.clouddn.com/Template.xls'
      link.setAttribute('download', name)
      document.body.appendChild(link)
      link.click()
      window.URL.revokeObjectURL(link.href)
      document.body.removeChild(link)
    },
    showUpload() {
      this.dialogResumeVisible = true
    },
    changeChannel(value) {
      this.form.channelId = value
      this.sources = []
      this.form.sourceId = ''
      const data = {
        page: 0,
        size: 9999,
        id: value
      }
      crudChannel.getAllSources(data).then(res => {
        this.sources = res.content
      }).catch(() => {
      })
    },
    getAllProducts() {
      crudProduct.getAll().then(res => {
        this.products = res.content
      }).catch(() => {
      })
    },
    getAllCompanys() {
      crudCompany.getAllCompany().then(res => {
        this.companys = res.content
      }).catch(() => {
      })
    },
    getAllChannel() {
      crudChannel.getAll().then(res => {
        this.channels = res.content
      }).catch(() => {
      })
    },
    addRecruit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          crudRecruit.add(this.form).then(res => {
            this.cancel()
            this.$notify({
              title: '添加成功',
              type: 'success',
              duration: 1500
            })
          }).catch(() => {})
        } else {
          return false
        }
      })
    },
    importRecruit() {
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
      this.dialogResumeVisible = false
    },
    handlerSuccess() {
      this.dialogVisible = false
      this.dialogResumeVisible = false
      this.$notify({
        title: '上传成功',
        type: 'success',
        duration: 1500
      })
    },
    handlerError() {
      this.$notify({
        title: '上传失败，请重新尝试',
        type: 'error',
        duration: 1500
      })
    },
    // 禁止输入空格
    keydown(e) {
      if (e.keyCode === 32) {
        e.returnValue = false
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
